<template lang="">
    <div class="chat">
       <div class="chat-nav">
        <van-nav-bar  title="小思同学" left-arrow  @click-left="$router.go(-1)" fixed></van-nav-bar>
       </div>
      <div class="chat-list">
          <div v-for="(obj,index) in list" :key="index">
            <div class="chat-main__left" v-if="obj.name!=='me'">
               <div class="chat-main__left-img">
                <van-image
                    width="60"
                    height="60"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    round
                 />
               </div>
               <div class="chat-main__left-content">
                  {{obj.msg}}
               </div>
            </div>
            <div class="chat-main__right" v-else>
                <div class="chat-main__right-content">
                  {{obj.msg}}
                </div>
               <div class="chat-main__right-img">
                   <van-image
                     width="60"
                     height="60"
                     :src="userPhoto"
                     round
                  />
               </div>
            </div>
         </div>
       </div>
        <div class="chat-emit">
            <div class="chat-emit-main">
               <div class="chat-emit__content">
                     <van-field v-model="value" placeholder="请输入用户名" />
               </div>
               <button class="chat-emit__btn" @click="sendFn">发送</button>
            </div>
        </div>
    </div>
</template>
<script>
import { io } from 'socket.io-client'
import { getToken } from '@/utils/token'
import { mapState } from 'vuex'
// import { threadId } from 'worker_threads'
export default {
  name: 'ChatC',
  data () {
    return {
      // 聊天列表进行渲染
      list: [{ name: 'xs', msg: '你好' }, { name: 'me', msg: 'hello' }, { name: 'xs', msg: '你好' }, { name: 'me', msg: 'hello' }, { name: 'xs', msg: '你好' }, { name: 'me', msg: 'hello' }, { name: 'xs', msg: '你好' }, { name: 'me', msg: 'hello' }, { name: 'xs', msg: '你好' }, { name: 'me', msg: 'hello' }],
      socket: null, // 创建socket对象
      value: ''
    }
  },
  created () {
    this.socket = io('ws://geek.itheima.net', {
      query: {
        token: getToken()
      },
      transports: ['websocket']
    })
    //  接收后端发送回来的消失
    this.socket.on('message', obj => {
      this.list.push({ name: 'xs', msg: obj.msg })
    })
    //  发送信息给后端
  },
  mounted () {
    console.log('mounted')
  },
  computed: {
    ...mapState('user', { userPhoto: 'userPotho' })
  },
  methods: {
    sendFn () {
      this.socket.emit('message', { msg: this.value, timestamp: new Date().getTime() })
      this.list.push({ name: 'me', msg: this.value })
      this.value = ''
    }
  },
  //   需要将最后一条消息滑入屏幕，监听list里面的变化
  //   设置了immediate，操作了dom 需要使用nextTick
  watch: {
    list: {
      immediate: true,
      handler () {
        this.$nextTick(() => {
          const theDiv = document.querySelector('.chat-list>div:last-child')
          console.log(theDiv)
          theDiv.scrollIntoView({ behavior: 'smooth' })
        })
      }

    }
  }
}
</script>
<style lang="less" scoped>
.chat
{
   .chat-list{
      margin-top:37px;
   }
.chat-main__left{
    padding: 10px 10px 5px 10px;
    display: flex;
    .chat-main__left-content
    {
        position: relative;
        padding: 5px 5px 7px 5px;
        margin-top:15px;
        margin-bottom:17px;
        margin-left: 15px;
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 5px;
        font-size: 15px;
        background-color: rgb(175, 226, 226);
    }
    .chat-main__left-content::before{
       content:'';
       display:inline-block;
       position:absolute;
       top: 10px;
       left: -6px;
       width: 10px;
       height: 10px;
       background-color: rgb(175, 226, 226);
       border: 1px solid rgba(0,0,0,.1);
       border-top:none;
       border-right: none;
       transform:rotate(45deg);
    }
}
.chat-main__right
{
   padding: 5px 10px 10px 10px;
   display: flex;
   justify-content: flex-end;
   .chat-main__right-content
   {
    position: relative;
    padding: 5px 5px 7px 5px;
    font-size: 15px;
    margin-top:15px;
    margin-bottom:17px;
    margin-right: 15px;
    background-color: rgb(175, 226, 226);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
   }
    .chat-main__right-content::after{
       content:'';
       display:inline-block;
       position:absolute;
       top: 10px;
       right: -6px;
       width: 10px;
       height: 10px;
       background-color: rgb(175, 226, 226);
       border: 1px solid rgba(0,0,0,.1);
       border-bottom:none;
       border-left: none;
       transform:rotate(45deg);
    }
}
.chat-emit{
   margin-top: 31px;
.chat-emit-main{
   width: 100%;
   position: fixed;
   display: flex;
   bottom: 0;
   .chat-emit__content
   {
      width:80% ;
      border-top: 1px solid rgba(0,0,0,.1);
      border-radius: 5px;
   }
   .chat-emit__btn
   {
      width: 20%;
      height: 42px;
      font-size: 15px;
      border: none;
      border-radius: 5px;
      outline: none;
       color: #ffff;
      background-color: #007bff;
   }
}
}

.clearfix::after{
content:'';
display: table;
clear: both;
}
}
</style>
